<template>
  <div class="banner">
    <ul>
      <li @click="xuangou">
        <img src="/static/img/xuangou.jpg" alt="选购">
      </li>
      <li @click="peijian">
        <img src="/static/img/peijian.jpg" alt="配件">
      </li>
      <li @click="pingbao">
        <img src="/static/img/pingbao.jpg" alt="屏包">
        </li>
      <li @click="dingzhi">
        <img src="/static/img/dingzhi.jpg" alt="定制">
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeBanner',
  methods: {
    xuangou: function(){
      alert('选购');
    },
    peijian: function(){
      alert(222);
    },
    pingbao: function(){
      alert(333);
    },
    dingzhi: function(){
      alert(444);
    }
  },
}
</script>

<style lang="less">
  .banner{
    width: 100%;
    height: 1.8rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-bottom: 1px solid #eee;
    background: white;
    li{
      width: 25%;
      height: 100%;
      float: left;
      text-align: center;
    }
    img{
      width: 1.4rem;
      height: 1.4rem;
    }
  }

</style>
